<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>网页标题</title>
	 <style>

	*{
		margin:0;
		padding:0;
	}
	html,body{
		height:100%;
		width:100%;
	}
	  body{
	   font-size:12px;
	   font-family:"微软雅黑";
	   display:flex;
	   justify-content:center;
	   align-items:center;
	   			background-color:#000;
	  }
	  #circle{
		position:absolute;
		width:200px;
		height:200px;
		border-radius:50%;
background-image:linear-gradient(red,yellow,blue);
animation:move 1s linear infinite;
	  }
	    #circle::before{
			content:'';
			position:absolute;
			width:100%;
			height:100%;
			border-radius:50%;
		background-image:linear-gradient(red,yellow,blue);
			filter:blur(20px);
		}
		#circle::after{
			content:'';
			position:absolute;
			top:50%;
			left:50%;
			width:80%;
			height:80%;
			transform:translateX(-50%) translateY(-50%);
			background-color:#000;
			border-radius:50%;
			
		}
	  #text{
		position:absolute;
		color:#fff;
	  }	
	  .dots{
	    position:relative;
		display:inline-block;
		width:3px;
		height:3px;
		border-radius:50%; 
		background-color:#fff;
		margin-left:15px;
		animation:upAndDown1 1s  linear infinite;
	  }
	  .dots::before,.dots::after{
	  		position:absolute;
	  		top:0;
	  		content:"";
	  		width:100%;
	  		height:100%;
	  		border-radius:50%;
	  		background-color:#fff;
	  }
	  .dots::before{
	  		right:10px;
			animation:upAndDown 1s  linear infinite;
	  }
	  .dots::after{
	  		left:10px;
				animation:upAndDown2 1s  linear infinite;
	  }
	  @keyframes move{
		from{
			transform:rotateZ(0);
		}
		to{
			transform:rotateZ(360deg);
		}
	  }
	  @keyframes upAndDown{
		0%{
			transform:translateY(0px);
		}
		25%{
			transform:translateY(-5px);
		}
		50%{
			transform:translateY(5px);
		}
		75%{
			transform:translateY(0);
		}
		100%{
			transform:translateY(0px);
		}
	  }
	   @keyframes upAndDown1{
		0%{
			transform:translateY(0px);
		}
		25%{
			transform:translateY(0);
		}
		50%{
			transform:translateY(-5px);
		}
		75%{
			transform:translateY(0);
		}
		100%{
			transform:translateY(0px);
		}
	  }
	   @keyframes upAndDown2{
		0%{
			transform:translateY(0px);
		}
		25%{
			transform:translateY(0);
		}
		50%{
			transform:translateY(5px);
		}
		75%{
			transform:translateY(-5px);
		}
		100%{
			transform:translateY(0px);
		}
	  }
	 </style>
 </head>
 <body>
	<div id='circle'></div>
	<p id='text'>
		<span>loading</span>
		<i class='dots'></i>
	</p>
 </body>
</html>